<template>
    <div>
        <ul>
            <li v-for="item in messageList" :key="item.id">
                <!-- 字符串写法 -->
                <!-- <router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}`">
                    {{ item.title }}
                </router-link> -->

                <!-- 对象写法 -->
                <router-link :to="{
                //用路径路由
                //path:'/home/message/detail',
                //命名路由
                name: 'xiangqing',
                params: {
                    id: item.id,
                    title: item.title
                }
            }">
                    {{ item.title }}
                </router-link>
                <button @click="pushClick(item)">push查看</button>
                <button @click="replaceClick(item)">replace查看</button>
            </li>

        </ul>
        <router-view></router-view>
    </div>

</template>

<script>
export default {
    name: "Message",
    data() {
        return {
            messageList: [
                { id: '001', title: '消息001' },
                { id: '002', title: '消息002' },
                { id: '003', title: '消息003' },
            ]
        }
    },
    methods: {
        pushClick(item) {
            console.log(this.$router)
            try {
                this.$router.push({
                name: 'xiangqing',
                params: {
                    id: item.id,
                    title: item.title
                }
            }).catch(err =>{
                console.log("aaa",err)
            })
            } catch (err) {
                // 处理其他可能的错误  
                console.log("bbb",err)
            }
            
        },
        replaceClick(item) {
            try{
                this.$router.replace({
                name: 'xiangqing',
                params: {
                    id: item.id,
                    title: item.title
                }
            }).catch(err => {
                console.log("aaa",err)
            })
            }catch(err){
                console.log("bbb",err)
            }
            
        }
    }

}
</script>

<style></style>